<template>
    <div v-if="loading" class="el-loading-fullscreen">
      <div class="el-loading-spinner">
        <svg class="circular" viewBox="25 25 50 50">
          <circle class="path" cx="50" cy="50" r="20" fill="none" />
        </svg>
        <p class="el-loading-text">加载中...</p>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  defineProps({
    loading: {
      type: Boolean,
      default: false
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .el-loading-fullscreen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.8);
    transition: opacity 0.3s;
    
    .el-loading-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      
      .circular {
        width: 42px;
        height: 42px;
        animation: loading-rotate 2s linear infinite;
        
        .path {
          animation: loading-dash 1.5s ease-in-out infinite;
          stroke-dasharray: 90, 150;
          stroke-dashoffset: 0;
          stroke-width: 2;
          stroke: #1a73e8;
          stroke-linecap: round;
        }
      }
      
      .el-loading-text {
        margin: 10px 0 0;
        color: #1a73e8;
        font-size: 14px;
      }
    }
  }
  
  @keyframes loading-rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }
  </style>